<template>
	<!-- 登录 -->
	<view class="login">
		<view class="login-main">
			<view class="title">
				<image src="../../static/projectLOGO.png" mode=""></image>
				<!-- <text>半农甄选</text> -->
				<text>校宇通</text>
			</view>
			<view class="prompt">
				<view class="">
					请您授权头像昵称信息，你授权的信息将受到严格保护，请放心使用。
				</view>
			</view>
			<view class="userImage">
				<view class="OuterCircle" v-if="!image">
					<button open-type="chooseAvatar" @chooseavatar="chooseAvatar">
						<view class="touxiang">
							<view class="InnerRing"></view>
							<text>获取头像</text>
						</view>
					</button>
				</view>
				<image :src="'https://songcan.xyct1688.com/' + image" mode="" v-if="image"></image>
			</view>
			<view class="inputView">
				<input type="text" placeholder="请输入昵称" v-model="name">
			</view>
			<view class="buttonView">
				<button style="margin-top: 15rpx;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键授权</button>
			</view>
		</view>
		<u-mask :show="show">
			<view class="warp">
				<u-loading mode="circle" color="#f14500" size="100"></u-loading>
			</view>
		</u-mask>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API
var log = require('@/utils/log.js') // 引用上面的log.js文件
export default {
	data() {
		return {
			name: '',
			phone: '',

			image: '',
			code: '',
			openId: '',
			// 通过被人分享的二维码进入的登录页参数
			scene: null,
			show: false,

		}
	},
	created() { },
	onLoad(query) {
		console.log(query);

		if (query.scene) {
			const index = query.scene.indexOf('suid-')
			if (index !== -1) {
				const result = query.scene.substring(index + 5)
				this.scene = result
				log.info('受邀请注册')
			}
		} else {
			log.info('非受邀请注册')
		}

	},
	methods: {
		// 授权登录
		getPhoneNumber(e) {
			if (!e.detail.code) {
				uni.showToast({
					title: '请授权',
					icon: 'none',
				})
				return false
			}
			this.show = true
			let _this = this
			uni.login({
				provider: 'weixin',
				success: function (loginRes) {
					$api.postOpenId({
						code: loginRes.code
					}).then(openidRes => {
						$api.postPhoneLogin({
							weapp_openid: openidRes.data.data.openid,
							nickname: _this.name,
							headimg: _this.image,
							code: e.detail.code,
							scene: _this.scene
						}).then(res => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
							_this.show = false
							uni.setStorage({
								key: 'token',
								data: res.data.data.token,
								success() {
									// 将用户id存到本地
									$api.postUserInformation({}).then(res => {
										uni.setStorage({
											key: 'userId',
											data: res.data.data.member_id,
										})
									})
								}
							})
						}).catch(err => {
							uni.showModal({
								title: '手机号授权登录接口调用失败！！！',
								content: "",
								success: function (res) {
									_this.show = false
								},
							});
						})
					}).catch(err => {
						uni.showModal({
							title: '获取openid接口调用失败！！！',
							content: "",
							success: function (res) {
								_this.show = false
							},
						});
					})

				},
				fail: function () {
					log.error('获取code失败')
				}
			});
		},
		// 获取头像
		chooseAvatar(e) {
			uni.uploadFile({
				url: 'https://songcan.xyct1688.com/api/upload/headimg',
				filePath: e.detail.avatarUrl,
				name: 'file',
				formData: {
					"user": "test",
				},
				success: (uploadFileRes) => {
					let img = JSON.parse(uploadFileRes.data)
					this.image = img.data.pic_path
				}
			})
		},
	}
}
</script>

<style lang="less" scoped>
.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.login {
	display: flex;
	justify-content: center;
	align-items: center;

	.login-main {
		width: 610rpx;
		text-align: center;
		margin-top: 305rpx;

		// 头部
		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 26rpx;

			image {
				width: 65rpx;
				height: 65rpx;
				border-radius: 50%;
			}

			text {
				width: 151rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #353535;
				padding-left: 26rpx;
			}
		}

		// 备注
		.prompt {
			width: 534rpx;
			height: 48rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #A6A6A6;
			padding: 50rpx 0;
			margin: auto;
		}

		.avatar {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 147rpx;
			height: 147rpx;
			background: #E9E9E9;
			border-radius: 50%;
			margin: 62rpx auto 45rpx;

			.square {
				width: 51rpx;
				height: 51rpx;
				background: #D3D3D3;
			}
		}

		// 用户头像
		.userImage {
			display: flex;
			justify-content: center;
			padding: 50rpx 0;

			// 用户头像外圈
			.OuterCircle {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 147rpx;
				height: 147rpx;
				background: #E9E9E9;
				border-radius: 50%;
				text-align: center;

				button {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 147rpx;
					height: 147rpx;
					background: #E9E9E9;
					border-radius: 50%;
				}

				button::after {
					border: none;
				}

				// .touxiang {}

				// 用户头像内圈
				.InnerRing {
					position: absolute;
					top: 28rpx;
					left: 48rpx;
					width: 51rpx;
					height: 51rpx;
					margin: auto;
					background: #D3D3D3;
				}

				text {
					display: inline-block;
					font-size: 18rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #818181;
					padding-top: 80rpx;
					padding-left: 10rpx;
				}
			}

			image {
				width: 147rpx;
				height: 147rpx;
				background: #E9E9E9;
				border-radius: 50%;
			}
		}

		// 输入昵称
		.inputView {
			margin-bottom: 18rpx;

			input {
				width: 608rpx;
				height: 69rpx;
				font-size: 22rpx;
				border: 1px solid #D3D3D3;
				border-radius: 12rpx;
				text-align: left;
				padding-left: 26rpx;
			}
		}

		// 确认授权
		.buttonView {
			margin: 100rpx 0;

			button {
				width: 610rpx;
				height: 69rpx;
				background: #F14500;
				border-radius: 34rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFEFE;
			}
		}
	}
}
</style>